---
title: Advanced Theming
description: Documentation for making advanced modifications to themes.
---

Now that you understand how to use Chakra UI theming API. Let's take a step
further and see if we can adapt a component to color mode.

When defining the styles for the `sizes` or `variants`, you can either pass a
style object or a function that returns a style object.

## Single Part Component

For a single part component like button, badge, etc. The style configuration has
the following signature:

```tsx live=false
type StyleInterpolation = StyleObject | ((options: StyleOptions) => StyleObject)

interface StyleOptions {
  theme: Theme
  colorMode: "light" | "dark"
  colorScheme: string
}

interface StyleConfig {
  baseStyle: StyleInterpolation
  sizes: { [size: string]: StyleInterpolation }
  variants: { [variant: string]: StyleInterpolation }
  defaultProps?: {
    variant: string
    size: string
  }
}
```

For example, to create a simple badge that changes its background based on color
mode. Here's how to go about it.

```jsx live=false
import { extendTheme } from "@chakra-ui/react"

// 1. define component configuration
const components = {
  CustomBadge: {
    baseStyle: ({ colorMode }) => ({
      bg: colorMode === "dark" ? "green.300" : "green.500",
      color: colorMode === "dark" ? "gray.800" : "white",
      textTransform: "uppercase",
      fontWeight: "semibold",
      letterSpacing: "0.02em",
      padding: "4px",
      borderRadius: "2px",
      fontSize: "12px",
    }),
  },
}

// 2. Call `extendTheme` and pass your custom values`
const theme = extendTheme({ components })

// 3. Use it in your components
function CustomBadge(props) {
  const { size, variant, ...rest } = props
  const styles = useStyleConfig("CustomBadge", { size, variant })
  return <Box as="span" sx={styles} {...rest} />
}

// 4. Use the component
render(<CustomBadge>I am a custom badge</CustomBadge>)
```

## Multipart or Composite Component

When it comes to multipart components for example tabs or menus etc, that have
multiple sub-parts, you can also style them based on the color mode. Here's the
signature:

```tsx live=false
type StyleInterpolation =
  | { [part: string]: SystemStyleObject }
  | ((options: StyleOptions) => { [part: string]: SystemStyleObject })

interface StyleOptions {
  theme: Theme
  colorMode: "light" | "dark"
  colorScheme: string
}

interface StyleConfig {
  baseStyle: StyleInterpolation
  sizes: { [size: string]: StyleInterpolation }
  variants: { [variant: string]: StyleInterpolation }
  defaultProps?: {
    variant: string
    size: string
  }
}
```

## Theme Typings

<Badge fontSize="sm" colorScheme="teal" letterSpacing="wider">
  v1.2.0
</Badge>

When adding new components, component variations, sizes, colors and other theme
foundations, you can extend the internal theme typings to provide autocomplete
for your application theme.

If you want to learn how to scale your custom theme you can
[follow this guide](/docs/theming/customize-theme#scaling-out-your-project).

### Install 

```bash
yarn add --dev @chakra-ui/cli
```

or

```bash
npm install -D @chakra-ui/cli
```

### Usage

```bash
chakra-cli tokens <path/to/your/theme.(js|ts)>
```

The theme entrypoint file should export the theme object either as `default`
export or as named `theme` export.

> Note 🚨: If you delete the `node_modules` directory, you'll need to re-run the
> command to get proper typings again.

For convenience, you can add a `postinstall` script to your `package.json`, so
you don't have to think about this every time you reinstall your dependencies.

```json
"scripts": {
  "gen:theme-typings": "chakra-cli tokens <path/to/your/theme.(js|ts)>",
  "postinstall": "npm run gen:theme-typings"
},
"devDependencies": {
  "@chakra-ui/cli": "^1.1.0"
}
```

The autocomplete for theme token **only works in _Visual Studio Code_ for now**.
We'd love to support JetBrains IDEs, but we have to wait for them to improve
their TypeScript support.

Please note that the CLI cannot read non-JavaScript/TypeScript files. If you
import other file types (`.css`, `.woff` or `.svg`) in your theme file, you'll
need to move those imports out of the theme file.
